<template>
  <panel title="组织架构管理">
    <a-layout>
      <a-layout-sider id="organize" width="240" style="background-color: white">
        <organizeTree
          class="mt-2"
          :loadTime="organizeTreeKey"
          @childByValue="treeSelectValue"
        ></organizeTree>
      </a-layout-sider>
      <a-layout>
        <a-layout-content style="background-color: white">
          <div class="ml-3 mt-2">
            <div v-show="formType === 0">
              <a-form :model="orgform" :rules="orgRule" ref="orgformRef">
                <a-form-item
                  label="名称"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="name"
                >
                  <a-input placeholder="请输入" v-model:value="orgform.name" />
                </a-form-item>
                <a-form-item
                  label="类型"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="type"
                >
                  <a-radio-group v-model:value="orgform.type">
                    <a-radio :value="0">单位</a-radio>
                    <a-radio :value="1">部门</a-radio>
                    <a-radio :value="2">岗位</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="状态"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="state"
                >
                  <a-radio-group v-model:value="orgform.state">
                    <a-radio :value="0">正常</a-radio>
                    <a-radio :value="1">冻结</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="部门/岗位领导"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  name="leader"
                >
                  <OrganizeSelect
                    :onlyUser="true"
                    :initialData="initialLeader"
                    @childByValue="selectLeader"
                  ></OrganizeSelect>

                  <a-input
                    v-model:value="orgform.leader"
                    style="display: none"
                  ></a-input>
                </a-form-item>
                <a-form-item
                  label="分管领导"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  name="chargeLeader"
                >
                  <OrganizeSelect
                    :onlyUser="true"
                    :initialData="initialChargeLeader"
                    @childByValue="selectchargeLeader"
                  ></OrganizeSelect>
                  <a-input
                    style="display: none"
                    v-model:value="orgform.chargeLeader"
                  ></a-input>
                </a-form-item>
                <a-form-item
                  label="备注"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  name="note"
                >
                  <a-textarea
                    rows="5"
                    placeholder="请输入备注"
                    v-model:value="orgform.note"
                  />
                </a-form-item>
              </a-form>
            </div>
            <div v-show="formType === 1">
              <a-form :model="userform" :rules="userRule" ref="userformRef">
                <a-form-item
                  label="姓名"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="name"
                >
                  <a-input placeholder="请输入" v-model:value="userform.name" />
                </a-form-item>
                <a-form-item
                  label="账号"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="userName"
                >
                  <a-input
                    placeholder="请输入账号"
                    v-model:value="userform.userName"
                  />
                </a-form-item>
                <a-form-item
                  label="性别"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  name="sex"
                  required
                >
                  <a-radio-group v-model:value="userform.sex">
                    <a-radio :value="0">男</a-radio>
                    <a-radio :value="1">女</a-radio>
                  </a-radio-group>
                </a-form-item>

                <a-form-item
                  label="状态"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="state"
                >
                  <a-radio-group v-model:value="userform.state">
                    <a-radio :value="0">正常</a-radio>
                    <a-radio :value="1">冻结</a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-form>
            </div>
            <div v-show="formType === 2">
              <a-form
                :model="workgroupform"
                :rules="workgroupRule"
                ref="workgroupformRef"
              >
                <a-form-item
                  label="名称"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="name"
                >
                  <a-input
                    placeholder="请输入"
                    v-model:value="workgroupform.name"
                  />
                </a-form-item>
                <a-form-item
                  label="成员"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  required
                  name="member"
                >
                  <OrganizeSelect
                    :initialData="memberIds"
                    @childByValue="selectmemberIds"
                  ></OrganizeSelect>

                  <a-input
                    style="display: none"
                    v-model:value="workgroupform.member"
                  />
                </a-form-item>
                <a-form-item
                  label="备注"
                  :labelCol="{ lg: { span: 4 }, sm: { span: 7 } }"
                  :wrapperCol="{ lg: { span: 13 }, sm: { span: 17 } }"
                  name="note"
                >
                  <a-textarea
                    rows="5"
                    placeholder="请输入备注"
                    v-model:value="workgroupform.note"
                  />
                </a-form-item>
              </a-form>
            </div>

            <a-form-item :wrapperCol="{ span: 20 }" style="text-align: center">
              <!-- 选择总公司按钮组 -->
              <div v-show="buttonGroup === 0">
                <a-button
                  type="primary"
                  class="mr-1"
                  @click="addUserOrOrganize(0)"
                >
                <template #icon><UsergroupAddOutlined /></template>
                  添加单位/部门/岗位
                </a-button>
                <a-button
                  type="primary"
                  class="mr-1"
                  @click="addUserOrOrganize(1)"
                >
                <template #icon><UserAddOutlined /></template>
                  添加人员
                </a-button>

                <a-button type="primary" class="mr-1" @click="handleUpdate">
                  <template #icon><CopyOutlined /></template>
                  保存
                </a-button>
              </div>
              <!-- 选择单位、部门、岗位按钮组 -->
              <div v-show="buttonGroup === 1">
                <a-button
                  type="primary"
                  class="mr-1"
                  @click="addUserOrOrganize(0)"
                >
                <template #icon><UsergroupAddOutlined /></template>
                  添加单位/部门/岗位
                </a-button>
                <a-button
                  type="primary"
                  class="mr-1"
                  @click="addUserOrOrganize(1)"
                >
                <template #icon><UserAddOutlined /></template>
                  添加人员
                </a-button>

                <a-button
                  type="primary"
                  class="mr-1"
                  @click="moveVisible = true"
                >
                <template #icon><UngroupOutlined /></template>
                  移动
                </a-button>
                <a-button type="primary" class="mr-1" @click="handleUpdate">
                  <template #icon><CopyOutlined /></template>
                  保存
                </a-button>
                <a-button type="primary" @click="handleDelete(0)" class="mr-1">
                  <template #icon><DeleteOutlined /></template>
                  删除
                </a-button>
              </div>

              <!-- 选择人员、兼职人员按钮组 -->
              <div v-show="buttonGroup === 2">
                <a-button
                  type="primary"
                  class="mr-1"
                  @click="moveVisible = true"
                >
                 <template #icon><UngroupOutlined /></template>
                  移动
                </a-button>
                <a-button type="primary" class="mr-1" @click="handleUpdate">
                   <template #icon><CopyOutlined /></template>
                  保存
                </a-button>
                <a-button type="primary" @click="handleDelete(1)" class="mr-1">
                    <template #icon><DeleteOutlined /></template>
                  删除
                </a-button>
              </div>
              <!-- 选择工作组按钮组 -->
              <div v-show="buttonGroup === 3">
                <a-button
                  type="primary"
                  class="mr-1"
                  @click="addUserOrOrganize(2)"
                >
                <template #icon><UsergroupAddOutlined /></template>
                  添加工作组
                </a-button>
                <a-button type="primary" @click="handleUpdate" class="mr-1">
                   <template #icon><CopyOutlined /></template>
                  保存
                </a-button>
                <a-button type="primary" @click="handleDelete(2)" class="mr-1">
                     <template #icon><DeleteOutlined /></template>
                  删除
                </a-button>
              </div>
              <!-- 添加状态下按钮组 -->
              <div v-show="buttonGroup === 4">
                <a-button type="primary" @click="handleAdduser" class="mr-1">
                  <template #icon><CopyOutlined /></template>
                  保存
                </a-button>
                <a-button type="primary" @click="GoBack" class="mr-1">
                   <template #icon><ReloadOutlined /></template>
                  返回
                </a-button>
              </div>
            </a-form-item>

            <vxe-modal
              resize
              width="700"
              title="组织/人员移动"
              v-model="moveVisible"
            >
              <a-alert
                message="不可选择人员"
                type="info"
                class="mb-2 mt-1"
                show-icon
              />

              <OrganizeSelect
                @childByValue="moveRes"
                :onlyOrganize="true"
              ></OrganizeSelect>
              <div style="text-align: right">
                <a-button type="primary" @click="handleMove" class="mt-2">
                   <template #icon><CheckSquareOutlined /></template>
                  确定
                </a-button>
              </div>
            </vxe-modal>
            <br />
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </panel>
</template>
<script>
  import organizeTree from '@/mycomponents/organize/organizeTree'
  import OrganizeSelect from '@/mycomponents/organize/organizeSelect'
  import {UsergroupAddOutlined, UserAddOutlined,CopyOutlined,UngroupOutlined, DeleteOutlined,ReloadOutlined,CheckSquareOutlined} from '@ant-design/icons-vue'
  import {
    Add,
    Adduser,
    Updateuser,
    Update,
    Delete,
    Getinfo,
    Move,
    Moveuser,
    DeleteUser,
  } from '@/api/organize/api'
  import {
    Add as AddworkGroup,
    Update as UpdateworkGroup,
    Delete as DeleteworkGroup,
  } from '@/api/workgroup/api'
  import panel from '@/plugins/panel/Panel.vue'
  import { ref } from 'vue'
  export default {
    components: {
      organizeTree,
      OrganizeSelect,
      panel,
      UsergroupAddOutlined,
UserAddOutlined,
CopyOutlined,
UngroupOutlined,
DeleteOutlined,
ReloadOutlined,
CheckSquareOutlined,
    },
    setup() {
      const orgformRef = ref()
      const userformRef = ref()
      const workgroupformRef = ref()
      return {
        orgformRef,
        userformRef,
        workgroupformRef,
      }
    },
    data() {
      return {
        moveVisible: false, // 移动选择框
        memberIds: '', // 工作组成员
        initialLeader: '',
        initialChargeLeader: '',
        buttonGroup: 0, // 按钮组

        isloading: false, // 按钮加载状态
        pid: '',
        organizeTreeKey: '', // 重新加载子组件
        selectItem: {},
        formType: 0, // 表单类别
        userform: {
          name: null,
          userName: null,
          sex: null,
          state: null,
        },
        workgroupform: {
          name: null,
          member: null,
          note: null,
        },
        orgform: {
          name: null,
          type: null,
          state: null,
          leader: null,
          note: null,
        },
        userRule: {
          name: [
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur',
              type: 'string',
            },
          ],
          userName: [
            {
              required: true,
              message: '请输入',
              trigger: 'change',
              type: 'string',
            },
          ],
          sex: [
            {
              required: true,
              message: '请选择状态',
              trigger: 'change',
              type: 'number',
            },
          ],
          state: [
            {
              required: true,
              message: '请选择状态',
              trigger: 'change',
              type: 'number',
            },
          ],
        },
        workgroupRule: {
          name: [
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur',
              type: 'string',
            },
          ],
          member: [
            {
              required: true,
              message: '请选择成员',
              trigger: 'change',
              type: 'string',
            },
          ],
        },
        orgRule: {
          name: [
            {
              required: true,
              message: '请输入名称',
              trigger: 'blur',
              type: 'string',
            },
          ],
          type: [
            {
              required: true,
              message: '请选择类型',
              trigger: 'change',
              type: 'number',
            },
          ],
          state: [
            {
              required: true,
              message: '请选择状态',
              trigger: 'change',
              type: 'number',
            },
          ],
        },
      }
    },
    created() {
      this.$message.config({
        top: `240px`,
      })
    },
    methods: {
      moveRes(val) {
        this.moveinfo = val
      },

      handleMove() {
        if (this.selectItem.type === 4 || this.selectItem.type === 6) {
          Moveuser({
            id: this.selectItem.id,
            toOrganizeId: this.moveinfo.resId,
            isPartPimeJob: false,
          }).then((res) => {
            if (res.isSuccess) {
              this.$message.success('人员移动成功！', 2.5)
              this.moveVisible = false
              this.organizeTreeKey = new Date().getTime()
            } else {
              this.$message.error('人员移动失败！', 2.5)
            }
          })
        } else {
          Move({ id: this.selectItem.id, parentId: this.moveinfo.resId }).then(
            (res) => {
              console.log('res', res)
              if (res.isSuccess) {
                this.$message.success('组织移动成功！', 2.5)
                this.moveVisible = false
                this.organizeTreeKey = new Date().getTime()
              } else {
                this.$message.error('人员移动失败！', 2.5)
              }
            }
          )
        }
      },

      //删除流程
      handleDelete(type) {
        var that = this
        this.$confirm({
          title: '提示',
          content: '是否删除该数据？',
          onOk: () => {
            switch (type) {
              case 0:
                Delete({ id: that.selectItem.id })
                  .then(() => {
                    that.$message.success('恭喜你，删除成功！')
                    this.organizeTreeKey = new Date().getTime()
                    this.formType = -1
                    this.buttonGroup = -1
                  })
                  .catch((err) => {
                    console.log(err)
                  })
                break
              case 1:
                DeleteUser({ id: that.selectItem.id })
                  .then(() => {
                    that.$message.success('恭喜你，删除成功！')
                    this.organizeTreeKey = new Date().getTime()
                    this.formType = -1
                    this.buttonGroup = -1
                  })
                  .catch((err) => {
                    console.log(err)
                  })

                break
              case 2:
                DeleteworkGroup({ id: that.selectItem.id })
                  .then(() => {
                    that.$message.success('恭喜你，删除成功！')
                    this.organizeTreeKey = new Date().getTime()
                    this.formType = -1
                    this.buttonGroup = -1
                  })
                  .catch((err) => {
                    console.log(err)
                  })

                break

              default:
                break
            }
          },
        })
      },

      // 添加工作组或组织
      handleAdduser() {
        var that = this
        if (that.formType === 1) {
          this.userformRef
            .validate()
            .then(() => {
              that.userform.organizeId = that.selectItem.id

              Adduser(that.userform).then((res) => {
                if (res.isSuccess) {
                  this.organizeTreeKey = new Date().getTime()

                  that.$message.success(
                    '用户添加成功！账号：' +
                      res.content.userName +
                      '密码：' +
                      res.content.passWord,
                    2.5
                  )
                } else {
                  this.$message.error('用户添加失败！', 2.5)
                }
              })
            })
            .catch((error) => {
              console.log('error', error)
            })
        } else if (that.formType === 2) {
          this.workgroupformRef
            .validate()
            .then(() => {
              AddworkGroup(this.workgroupform).then(() => {
                that.$message.success('工作组添加成功', 2.5)
                this.organizeTreeKey = new Date().getTime()
              })
            })
            .catch((error) => {
              console.log('error', error)
            })
        } else {
          this.orgformRef
            .validate()
            .then(() => {
              that.orgform.parentId = that.selectItem.id
              Add(that.orgform).then((res) => {
                if (res.isSuccess) {
                  that.$message.success('组织添加成功', 2.5)
                  this.organizeTreeKey = new Date().getTime()
                } else {
                  this.$message.error('添加组织失败！', 2.5)
                }
              })
            })
            .catch((error) => {
              console.log('error', error)
            })
        }
      },
      // 修改工作组或组织
      handleUpdate() {
        var that = this
        if (that.formType === 1) {
          this.userformRef
            .validate()
            .then(() => {
              that.userform.organizeId = that.selectItem.id
              Updateuser({ id: that.selectItem.id }, that.userform).then(
                (res) => {
                  if (res.isSuccess) {
                    that.$message.success('用户修改成功', 2.5)
                    this.organizeTreeKey = new Date().getTime()
                  } else {
                    this.$message.error('用户修改失败！', 2.5)
                  }
                }
              )
            })
            .catch((error) => {
              console.log('error', error)
            })
        } else if (that.formType === 2) {
          this.workgroupformRef
            .validate()
            .then(() => {
              UpdateworkGroup(
                { id: that.selectItem.id },
                this.workgroupform
              ).then((res) => {
                if (res.isSuccess) {
                  that.$message.success('修改工作组成功', 2.5)
                  this.organizeTreeKey = new Date().getTime()
                } else {
                  this.$message.error('修改工作组失败！', 2.5)
                }
              })
            })
            .catch((error) => {
              console.log('error', error)
            })
        } else {
          this.orgformRef
            .validate()
            .then(() => {
              that.orgform.parentId = that.selectItem.id
              Update({ id: that.selectItem.id }, that.orgform).then((res) => {
                if (res.isSuccess) {
                  that.$message.success('组修改加成功', 2.5)
                  this.organizeTreeKey = new Date().getTime()
                } else {
                  this.$message.error('修改工作组失败！', 2.5)
                }
              })
            })
            .catch((error) => {
              console.log('error', error)
            })
        }
      },
      //  选择树组件后执行的方法
      treeSelectValue: function (val) {
        // childValue就是子组件传过来的值
        this.selectItem = val
        if (val.id === '662d8823-ad50-32f6-9144-39fa924705e0') {
          this.buttonGroup = 0
          this.formType = 0
        } else {
          switch (val.type) {
            case 0:
            case 1:
            case 2:
              this.buttonGroup = 1
              this.formType = 0
              break
            case 4:
            case 6:
              this.buttonGroup = 2
              this.formType = 1
              break
            case 5:
              this.buttonGroup = 3
              this.formType = 2
              break
          }
        }
        Getinfo({
          Id: val.type === 4 || val.type === 6 ? val.userId : val.id,
          type: val.type,
        }).then((res) => {
          if (res.isSuccess) {
            console.log(res)
            if (val.type == 4 || val.type === 6) {
              this.userform = {
                name: res.content.name,
                userName: res.content.userName,
                state: res.content.state,
                sex: res.content.sex,
              }
            } else if (val.type == 5) {
              this.workgroupform = {
                name: res.content.name,
                member: res.content.member,
                note: res.content.note,
              }
              this.memberIds = res.content.member
            } else {
              this.orgform = {
                name: res.content.name,
                type: res.content.type,
                state: res.content.state,
                leader: res.content.leader,
                chargeLeader: res.content.chargeLeader,
                note: res.content.note,
              }
              this.initialLeader = res.content.leader
              this.initialChargeLeader = res.content.chargeLeader
            }
          }
        })
      },
      // 改变按钮组状态
      addUserOrOrganize(type) {
        this.buttonGroup = 4
        this.formType = type
        this.userform = {}
        this.workgroupform = {}
        this.orgform = {}
      },
      // 选择工作组成员
      selectmemberIds(res) {
        this.workgroupform.member = res.resId
      },
      // 选择部门/岗位领导
      selectLeader(res) {
        this.orgform.leader = res.resId
      },
      // 选择分管领导
      selectchargeLeader(res) {
        this.orgform.chargeLeader = res.resId
      },
      // 返回
      GoBack() {
        this.treeSelectValue(this.selectItem)
      },
    },
  }
</script>
<style lang="less">
  #organize .ant-layout-sider-children {
    border-right: 1px solid #b6c2c9;
  }
    #organize  .ant-tree-icon-hide {
    margin-left: 10% !important;
  }
</style>
